<template>
	<div class="writing myarticlesBody">
		<Nav></Nav>
		<div class="writing_right">
			<div class="TitleList">
				<div class="TitleList_padding">
					<div class="TitleList_top">
						<div class="TitleList_top_title"><span></span>我的文章</div>
						<div class="TitleList_top_txt">
							<div class="top_txt_dd">
								<div class="txt_dd_list" @click="changeTab(2)" :class="{ active: activeTab === 2 }">
									<span><img src="@a/img/sv27.svg" /><img
											src="@a/img/sv27on.svg" /></span>待发布({{count_arr[2]}})
								</div>
								<div class="txt_dd_list" @click="changeTab(1)" :class="{ active: activeTab === 1 }">
									<span><img src="@a/img/sv28.svg" /><img
											src="@a/img/sv28on.svg" /></span>待审核({{count_arr[1]}})
								</div>
								<div class="txt_dd_list" @click="changeTab(3)" :class="{ active: activeTab === 3 }">
									<span><img src="@a/img/sv8.svg" /><img
											src="@a/img/sv8on.svg" /></span>发布成功({{count_arr[3]}})
								</div>
								<div class="txt_dd_list" @click="changeTab(4)" :class="{ active: activeTab === 4 }">
									<span><img src="@a/img/sv6.svg" /><img
											src="@a/img/sv6on.svg" /></span>发布失败({{count_arr[4]}})
								</div>
								<div class="txt_dd_list" @click="changeTab(0)"
									:class="{ active: activeTab === 0  , keyframes: count_arr[0] !== 0}">
									<span><img src="@a/img/sv7.svg" /><img
											src="@a/img/sv7on.svg" /></span>创作中({{count_arr[0]}})
								</div>
							</div>
							<div class="top_txt_dt">
								<div class="txt_dt_list">
									<div class="dt_list_left">分类</div>
									<el-select clearable v-model="class_type" placeholder="全部">
										<el-option v-for="item in class_types" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
									<div class="dt_list_icon" @click="showClass"><img src="@a/img/sv4.svg" /></div>
								</div>
								<div class="txt_dt_list" v-if="activeTab == 3">
									<div class="dt_list_left">站点</div>
									<el-select clearable v-model="site" placeholder="全部">
										<el-option v-for="item in sites" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</div>
								<div class="txt_dt_search">
									<div class="dt_search_left">
										<span><i class="el-icon-search"></i></span>
										<input type="text" v-model="keywords" placeholder="搜索标题/id" />
									</div>
									<div class="dt_search_right" @click="search">搜索</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="myarticles" v-loading="loading" element-loading-spinner="el-icon-loading"
					element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
					<div class="myarticles_list" v-if="activeTab == 2">
						<toBereleased :infos="infos" @changePage="changePage" @changeSize="changeSize"
							@refresh="refresh"></toBereleased>
					</div>
					<div class="myarticles_list" v-if="activeTab == 1">
						<toBereviewed :infos="infos" @changePage="changePage" @refresh="refresh"
							@changeSize="changeSize"></toBereviewed>
					</div>
					<div class="myarticles_list" v-if="activeTab == 3">
						<published :infos="infos" @changePage="changePage" @changeSize="changeSize"></published>
					</div>
					<div class="myarticles_list" v-if="activeTab == 4">
						<publishedFail :infos="infos" @changePage="changePage" @refresh="refresh" @changeSize="changeSize"></publishedFail>
					</div>
					<div class="myarticles_list" v-if="activeTab == 0">
						<creation :infos="infos" @changePage="changePage" @changeSize="changeSize"></creation>
					</div>
				</div>
			</div>
		</div>


		<div class="CategorySettings" v-show="show">
			<div class="CategorySettings_content">
				<div class="CategorySettings_content_title">
					<div class="content_title_dd"><span></span>分类设置</div>
					<div class="content_title_dt" @click="show = !show"><i class="el-icon-close"></i></div>
				</div>
				<div class="CategorySettings_content_txt">
					<div class="content_txt_title">
						<div class="txt_title_list">序号</div>
						<div class="txt_title_list">排序</div>
						<div class="txt_title_list">名称</div>
					</div>
					<div class="content_txt_table">
						<div class="txt_table_scro">
							<div class="txt_table_list" v-for="(tab, index) in class_types" :key="index">
								<div class="table_list_li">{{ index + 1 }}</div>
								<div class="table_list_li ToSort" :class="{ active: tab.isActive }">
									{{ tab.sort }}
									<input type="text" v-model="tab.sort" />
								</div>
								<div class="table_list_li Name" :class="{ active: tab.isActive }">
									<div class="list_li_name">{{ tab.name }}({{ tab.count }})</div>
									<input type="text" v-model="tab.name" />
								</div>
								<div class="table_list_operate" :class="{ active: tab.isActive }">
									<div class="list_operate_li" @click="toggleActive2(index)">
										<img src="@a/img/sv5.svg" />
										<span v-if="!tab.isActive">编辑</span>
										<span v-if="tab.isActive">保存</span>
									</div>
									<div class="list_operate_li" @click="deleteInfo2(index)"><img
											src="@a/img/sv6.svg" />删除
									</div>
								</div>
							</div>
						</div>
						<div class="txt_table_add">
							<div class="table_add_btn" @click="addItem">增加信息+</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Message,
		MessageBox
	} from 'element-ui';
	import toBereleased from "@c/common/writing/myArticles/toBereleased";
	import toBereviewed from "@c/common/writing/myArticles/toBereviewed";
	import published from "@c/common/writing/myArticles/published";
	import publishedFail from "@c/common/writing/myArticles/publishedFail";
	import creation from "@c/common/writing/myArticles/creation";
	import Nav from "@c/common/nav/nav";

	let interval = null;

	export default {
		name: "myArticles",
		data() {
			return {
				infos: {
					data: [],
					per_page: 20,
					current_page: 1,
					last_page: 1,
					total: 0
				},
				count_arr: [
					0, 0, 0, 0
				],
				activeTab: 2,
				class_types: [],
				class_type: '',
				nextId: 6,
				show: false,
				sites: [],
				site: '',
				keywords: '',
				per_pages: [
					20,
					50,
					100,
					200
				],
				per_page: 20,
				current_page: 1,
				loading: true,
			};
		},
		components: {
			toBereleased,
			toBereviewed,
			published,
			creation,
			publishedFail,
			Nav
		},
		created() {
			if (this.$route.query.state) {
				console.log("开始减1了");
				this.changeTab(this.$route.query.state - 1)
			} else {
				this.getList()
			}
			this.getArticleClass()
			this.getSites()
			this.getMemberInfo()
		},
		methods: {
			search() {
				this.current_page = 1;
				this.getList()
			},
			getMemberInfo() {
				let that = this;
				that.axios.get('/api/member/getInfo').then(res => {
					localStorage.setItem('memberInfo', JSON.stringify(res.result))
					that.$store.commit('setMemberInfo', res.result)
				})
			},
			refresh() {
				this.getList()
			},
			changeTab(index) {
				this.activeTab = index;
				this.current_page = 1;
				this.site = '';
				this.getList()

				let that = this;
				console.log(that.count_arr);
				if (index === 0) {
					setTimeout(function() {
						interval = setInterval(function() {
							that.axios.post('/api/article/getRecentCreatedArticles').then(res => {
								if (res.code === 1) {
									let ids = res.result;
									ids.forEach((id) => {
										for (let i in that.infos.data) {
											if (that.infos.data[i].id == id) {
												if (!that.infos.data[i].is_remove) {
													that.infos.data[i].is_remove = true;
													that.count_arr[0]--;
													if (that.infos.data[i]['type'] == 0) {
														that.count_arr[2]++;
													} else {
														that.count_arr[1]++;
													}
												}

											}
										}
									})
									that.infos = JSON.parse(JSON.stringify(that.infos))
									//如果当前列表没有数据，则停止轮询
									console.log(that.count_arr[0])
									if(that.count_arr[0]<1){
										console.log("要开始清除了")
										clearInterval(interval)
									}
								}
							})
						}, 20000)
						console.log("看看有几次interval")
					}, 3000)

				} else {
					if (interval) {
						clearInterval(interval)
					}
				}
			},
			changePage(val) {
				this.current_page = val
				this.getList()
			},
			changeSize(val) {
				this.per_page = val
				this.getList()
			},
			//分类设置保存、编辑
			toggleActive2(index) {
				let that = this;
				let thisData = this.class_types[index];
				// 新增或修改
				if (thisData.isActive) {
					if (thisData.id == 0) {
						//新增
						that.axios.post('/api/articleClass/add', {
							name: thisData.name,
							sort: thisData.sort ? thisData.sort : 0
						}).then(res => {
							if (res.code == 1) {
								that.getArticleClass()
								that.class_type = ''
								Message.success('新增成功！')
							}
						})
					} else {
						//修改
						that.axios.post('/api/articleClass/update', {
							id: thisData.id,
							name: thisData.name,
							sort: thisData.sort
						}).then(res => {
							if (res.code == 1) {
								that.getArticleClass()
								Message.success('修改成功！')
							}
						})
					}
				}
				this.class_types[index].isActive = !thisData.isActive
				console.log(this.class_types[index])
			},
			//分类设置删除
			deleteInfo2(index) {
				let that = this;
				const item = this.class_types[index];
				MessageBox.confirm(`确定删除${item.name}吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.axios.post('/api/articleClass/delete', {
						id: item.id
					}).then(res => {
						if (res.code == 1) {
							that.class_type = '';
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							that.getArticleClass()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					// 用户点击取消或者弹窗关闭时不做任何操作
				});
			},

			showClass() {
				this.getArticleClass();
				this.show = !this.show
			},
			getArticleClass() {
				let that = this;
				this.axios.get('/api/articleClass/list').then(res => {
					res.result.forEach(item => {
						item.isActive = false
					})
					that.class_types = res.result
				})
			},

			getSites() {
				let that = this;
				this.axios.get('/api/site/list').then(res => {
					res.result.data.forEach(item => {
						item.isActive = false
					})
					that.sites = res.result.data
				})
			},

			getList() {
				// loading 开始
				this.loading = true;

				let that = this;
				that.axios.get('/api/article/list', {
					params: {
						state: this.activeTab,
						page: this.current_page,
						keywords: this.keywords,
						site_id: this.site,
						class_id: that.class_type,
						list_rows: this.per_page,
					}
				}).then(res => {
					// loading结束
					this.loading = false;

					res.result[0].data.forEach(res => {
						res.checked = false;
					})
					that.infos = res.result[0];
					that.infos.per_pages=[20,50,100,200];

					for (let i in that.infos.data) {
						that.infos.data[i].is_remove = false;
					}
					that.count_arr = res.result[1];
					if (this.activeTab === 0) {
						if (res.result[0].data.length == 0) {
							if (interval) {
								clearInterval(interval)
							}

						}
					}
				})
			},
			//点击增加信息
			addItem() {
				this.class_types.push({
					id: 0,
					ToSort: 0,
					name: '',
					isActive: true
				});
			},
			//标题列表保存、编辑
			toggleActive(index) {
				this.infos.forEach((info, i) => {
					if (i === index) {
						info.isActive = !info.isActive;
					}
				});
			},


		},
		mounted() {

		},
	}
</script>

<style>
	@import "myArticles.css";
</style>